@import "../common/vars.scss";
@import "../mixins/mixins.scss";
@include create(menu){
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: rgba(0,0,0,.3)!important;
    // transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
    @include m(item){
        padding: 0px;
        margin: 0px;
        .aiui-menu-title{
            display: block;
            padding: 0 20px;
            height: 48px;
            line-height: 48px;
            font-size: $font-size-base;
            list-style: none;
            cursor: pointer;
            position: relative;
            transition: border-color .3s,background-color .3s,color .3s;
            box-sizing: border-box;
            white-space: nowrap;
            color: rgb(255, 255, 255);
            background-color: rgb(48, 65, 86);
        }
        .aiui-menu-item-title{
            display: block;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: $font-size-base;
            list-style: none;
            cursor: pointer;
            position: relative;
            transition: border-color .3s,background-color .3s,color .3s;
            box-sizing: border-box;
            white-space: nowrap;
            color: rgb(191, 203, 217) !important;
            background: #1f2d3d!important;
        }
        .aiui-menu-item-title:hover{
            background-color: #001528 !important;
        }
        .aiui-menu-title:hover{
            background: rgb(38, 52, 69);
            color: $color-white;
        }
        @include when(open){
            >*>i.aiui-icon-menu-arrow{
                transform: rotate(180deg);
            }
        }
    }
}

@include create(icon-menu-arrow){
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -7px;
    transition: transform .3s;
    font-size: 14px;
    line-height: 1;
}